<template>
  <div class="l_body">
    <div class="container clearfix">
      <div class="l_main">
        <article id="archive-page" class="post article white-box">
          <section class="archive">
            <div v-for="key in Object.keys(arcData)">
              <div class="archive-item archive-year mark"><h2>{{key}}</h2>
                <hr>
              </div>
              <div class="archive-item archive-post mark"
                   v-for="data in arcData[key]">
                <a v-on:click="jump({ name: 'details', params: { temp: catalog[data.index].templet }})">
                  <time>{{data.date}}</time>
                  <span class="title">{{catalog[data.index].name}}</span></a>
              </div>
            </div>
          </section>
        </article>
      </div>
      <aside class="l_side">
        <RightView/>
      </aside>
    </div>
  </div>
</template>

<script>
  import {catalog} from '../../common/DataSource/config'
  import RightView from '../MainContainer/view/RightView'

  export default {
    name: "Archives",
    data() {
      return {
        catalog: catalog,
        arcData: JSON.parse(sessionStorage.getItem('arcData'))
      };
    },
    created: function () {
      window.scrollTo(0, 0);
    },
    components: {
      RightView
    },
    methods:{
      jump: function (router) {
        this.$router.push(router);
      }
    }
  };
</script>

<style>

</style>

